<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    ref="chart"
    class="ui-line-chart h-full"
    :style="{
      width: '100%',
    }"
  ></div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  import * as echarts from 'echarts'
  export default defineComponent({
    name: 'UiBydInventory',
    components: {},
    mixins: [UiMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        infoComponent: {},
        designByUser: [],
        inter: null,
        loopRequest: true,
        loopTime: 5000,
      }
    },
    watch: {},
    created() {
      this.infoComponent = cloneDeep(this.info)
    },
    mounted() {
      if (this.info.extension.firstGetData?.value === false) {
        return
      }
      this.$nextTick(() => {
        this.getRequestData()
        if (this.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    deactivated() {
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getRequestData() {
        let obj = {
          requestSet: {
            api: '/wms/wms-web',
            method: 'wms.kanban.inventory.query',
            getDataKey: 'wms.kanban.inventory.query',
            loopRequest: false,
            loopTime: 3000,
            nameKey: '',
            valueKey: '',
            busList: [],
            dataObj: {},
            isJson: false,
            data: [
              {
                key: '#LIMIT#',
                value: '1',
              },
              {
                key: '#PAGE_SIZE#',
                value: '50',
              },
            ],
            resList: [],
          },
        }

        this.$request(obj.requestSet, (res) => {
          this.initChart(res)
        })
      },
      initChart(res) {
        let colorList = ['#fbf35d', '#2eb0ed']
        let chartDom = this.$refs.chart
        let myChart = echarts.init(chartDom)
        let option = {
          title: [
            {
              text: '单位：万',
              right: '20%',
              top: '3%',
              textStyle: {
                fontSize: '14',
                fontWeight: '400',
                color: 'rgba(255,255,255,0.45)',
              },
            },
          ],
          legend: {
            top: '3%',
            right: '5%',
            itemWidth: 14,
            itemGap: 14,
            textStyle: {
              color: '#fff',
              fontSize: 12,
              fontFamily: 'PuHuiTi',
            },
            data: [
              {
                name: '原材料',
                icon: 'rect',
                textStyle: {
                  color: '#fff',
                },
                itemStyle: {
                  color: '#F7F35E',
                },
              },
              {
                name: '半成品',
                icon: 'rect',
                textStyle: {
                  color: '#fff',
                },
                itemStyle: {
                  color: '#65D6EC',
                },
              },
              {
                name: '成品',
                icon: 'rect',
                textStyle: {
                  color: '#fff',
                },
                itemStyle: {
                  color: '#38A622',
                },
              },
            ],
          },
          tooltip: {
            trigger: 'axis',
            transitionDuration: 0,
            textStyle: {
              fontSize: 24,
              fontWeight: 400,
              align: 'left',
            },
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: [
                '1',
                '2',
                '3',
                '4',
                '5',
                '6',
                '7',
                '8',
                '9',
                '10',
                '11',
                '12',
                '13',
                '14',
                '15',
                '16',
                '17',
                '18',
                '19',
                '20',
                '21',
                '22',
                '23',
                '24',
                '25',
                '26',
                '27',
                '28',
                '29',
                '30',
              ],
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.45)',
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,0.45)',
                },
                fontSize: 12,
                margin: 15,
              },
              axisPointer: {
                label: {
                  padding: [0, 0, 10, 0],
                  // 这里的margin和axisLabel的margin要一致!
                  margin: 15,
                  fontSize: 12,
                  backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#fff', // 0% 处的颜色
                      },
                      {
                        offset: 0.86,
                        color: '#fff', // 0% 处的颜色
                      },
                      {
                        offset: 0.86,
                        color: '#33c0cd', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#33c0cd', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: '原材料',
              type: 'line',
              data: res.map((el) => el.BYD01_QTY),
              symbolSize: 1,
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {
                width: 3,
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#00E0DB',
                  },
                  {
                    offset: 1,
                    color: '#FBF35D',
                  },
                ]),
                shadowColor: 'rgba(158,135,255, 0.3)',
                // shadowBlur: 10,
                // shadowOffsetY: 20,
              },
              itemStyle: {
                normal: {
                  color: colorList[0],
                  borderColor: colorList[0],
                },
              },
            },
            {
              name: '半成品',
              type: 'line',
              data: res.map((el) => el.BYD02_QTY),
              symbolSize: 1,
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {
                width: 3,
                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#35CFE9',
                  },
                  {
                    offset: 1,
                    color: '#1952FB',
                  },
                ]),
                shadowColor: 'rgba(115,221,255, 0.3)',
                // shadowBlur: 2,
                // shadowOffsetY: 20,
              },
              itemStyle: {
                normal: {
                  color: colorList[1],
                  borderColor: colorList[1],
                },
              },
            },
            {
              name: '成品',
              type: 'line',
              data: res.map((el) => el.BYD03_QTY),
              symbolSize: 1,
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {
                width: 3,
                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#46CF15',
                  },
                  {
                    offset: 1,
                    color: '#3412AF',
                  },
                ]),
                shadowColor: 'rgba(115,221,255, 0.3)',
                // shadowBlur: 2,
                // shadowOffsetY: 20,
              },
              itemStyle: {
                normal: {
                  color: colorList[1],
                  borderColor: colorList[1],
                },
              },
            },
          ],
        }

        option && myChart.setOption(cloneDeep(option), true)
      },
    },
  })
</script>
<style lang="scss">
  .uiBarChart {
    width: 100%;
    height: 100%;
  }
</style>
